{layout name="formlayout" /}


<style>
    .wechat-view{
        width:320px;
        height:520px;
        position:relative;
        background-color:#f5f5f5;
    }
    .wechat-view .view-header{
        height:80px;
        background-repeat:no-repeat;
        text-align:center;
        color:white;
        background-image:url("/static/layuiadmin/style/res/wechat/mobile_head.png");
    }
    .wechat-view .view-footer{
        position:absolute;
        left:0px;
        bottom:0px;
        width:inherit;
        height:50px;
        padding-left:50px;
        background-repeat:no-repeat;
        background-image:url("/static/layuiadmin/style/res/wechat/mobile_foot.png");
    }
    .wechat-view .view-footer li{
        width:90px;
        height:50px;
        cursor:pointer;
        line-height:50px;
        text-align:center;
        border-right:1px solid #e7e7eb;
    }
    .wechat-view .view-body{
        
    }
    .flex{
        display:flex;
        flex-flow:row;
    }
</style>

<div class="">
    <div class="layui-fluid">
        <div class="layui-col-md3">
        <div class="wechat-view">
            <div class="view-header">
                <span style="line-height:90px;">公众号</span>
                <div><span style="background-color:rgb(103, 106, 108);border-radius: 25px;"><?php echo date('H:i') ?></span></div>
            </div>
            <div class="view-body"></div>
            <div class="view-footer"></div>
        </div>
        </div>
        <div class="layui-col-md5 layui-card" style="height:520px;">
            <form class="layui-form" action="/admin/wechatreply/invalid"  lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding-top:20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">规则状态</label>
                    <div class="layui-input-block">
                    <?php
                     $enabled=$model->enabled??0;
                    ?>
                        <input type="radio" name="enabled" value="1" title="启用" {$enabled ==1 ?"checked":""}>
                        <input type="radio" name="enabled" value="0" title="禁用" {$enabled ==0 ?"checked":""}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">消息类型</label>
                    <div class="layui-input-block">
                    <?php $type=$model->type??"" ?>
                        <select name="type" lay-filter="replyType" lay-verify="required">
                            <option {$type=="text"?"selected":""} value="text">文本消息</option>
                            <option {$type=="image"?"selected":""} value="image">图片消息</option>
                            <option {$type=="news"?"selected":""} value="news">图文消息</option>
                            <option {$type=="voice"?"selected":""} value="voice">声音消息</option>
                        </select>
                    </div>
                </div>

                <div id="replyContent">
                    <div class="layui-form-item" {$type=="text"?"":"hidden"} type="text">
                        <label class="layui-form-label">规则内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" required lay-verify="required" placeholder="请输入回复内容" class="layui-textarea">{$model->content|default=''}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item" {$type=="image"?"":"hidden"} type="image">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="openImages">选择图片</button>
                            <input type="hidden" id="image" name="image" value="{$model->path|default=''}" lay-verify="required" placeholder="请上传图片"
                                autocomplete="off" class="layui-input">
                            <div class="layui-upload-list" style="width:100px;height:200px;">
                                <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" id="demo1" src="{$model->path|default=''}">
                                <p id="demoText"></p>
                            </div>
                        </div>
                        <!-- <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-image">上传</button> -->
                    </div>
                    <div {$type=="news"?"":"hidden"} type="news">
                        <label class="layui-form-label">选择图文</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                            <div class="layui-upload-list" style="width:100px;height:200px;">
                                <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" id="newsCover" src="{$model->articleImage|default=''}">
                                <p id="newsTitle">{$model->articleTitle|default=''}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item" {$type=="voice"?"":"hidden"} type="voice">
                        <label class="layui-form-label">声音</label>
                        <div class="layui-input-inline">
                            <input type="text" id="audio" name="audio" value="" lay-verify="required" placeholder="请上传音乐文件"
                                autocomplete="off" class="layui-input">
                        </div>
                        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-audio">上传</button>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$model->id|default=''}">
                        <input type="hidden" name="newsId" value="{$model->newsId|default=''}" id="newsId">
                        <input type="hidden" name="mediaImage" value="{$model->mediaImage|default=''}">
                        <input type="hidden" name="mediaAudio" value="{$model->mediaAudio|default=''}">
                        <input type="hidden" name="imageAssetId" value="{$model->imageAssetId|default=''}" id="imageId">
                        <input type="hidden" name="audioAssetId" value="{$model->audioAssetId|default=''}" id="audioId">
                    </div>
                    <input type="button" style="position:absolute;bottom:0px;" class="layui-btn layui-btn-fluid" lay-submit lay-filter="zbc-wechat-submit" value="确认">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    })
    .extend({
        index:'lib/index'
    })
    .use(['index','form','upload'], function () {

        var form=layui.form;
        var view=layui.view;
        var upload=layui.upload;
        var $ = layui.$

          //监听提交
        form.on('submit(zbc-wechat-submit)', function(data){
            view.req({
              url:"/admin/wechatreply/invalid",
              data: data.field,
              method: 'post',
              success: function (result) {
                if (result.data) {
                  layer.msg("已完成");
                  location.reload();
                  layer.close(index); //关闭弹层
                } else {
                  layer.msg(result.msg, { icon: 4 });
                }
              }
            })

            return false;
        });

        $(document).on("click","#openNews",function(){
                parent.layer.open({
                title: '图文列表',
                type:2,
                area:['1024px', '600px'],
                content: '/admin/wechatArticle/list',
                btn:["确定","取消"],
                yes:function(index,layero){
                    var selected=layero.find("iframe").contents().find("[data-selected=true]")
                    var id=selected.attr("data-id");
                    var path=selected.attr("data-path");
                    var title=selected.attr("data-title");
                    $("#newsTitle").text(title);
                    $("#newsCover").attr("src",path);
                    $("#newsId").val(id);
                    parent.layer.close(index);
                }
            }); 
        })

        $(document).on("click","#openImages",function(){
                var parentLayer=parent.layer;
                var $this=$(this);
                parentLayer.open({
                title: '图片列表',
                type:2,
                area:['1024px', '600px'],
                content: '/admin/wechatArticle/images',
                btn:["确定","取消"],
                yes:function(index,layero){
                    var selected=layero.find("iframe").contents().find("[data-selected=true]")
                    var id=selected.attr("data-id");
                    var path=selected.attr("data-path");
                    $("#image").val(path);
                    $("#imageId").val(id);
                    $("[name=mediaImage]").val("");
                    parentLayer.close(index);
                }
            }); 
        })

        form.on("select(replyType)",function(data){
            var reply=$("#replyContent [type="+data.value+"]");
            if(!reply) return;
            reply.show().siblings("div [type]").hide();
        })
        
        // upload.render({
        //    elem: '#layuiadmin-upload-image'
        //    , url: '/admin/upload/wechatFile?type=image'
        //    , accept: 'images'
        //    , method: 'post'
        //    , acceptMime: 'image/*'
        //    ,before: function(obj){
        //        //预读本地文件示例，不支持ie8
        //        obj.preview(function(index, file, result){
        //            $('#demo1').attr('src', result); //图片链接（base64）
        //        });
        //    }
        //    , done: function (res) {
        //         if(!res.data)  return layer.msg('上传失败');

        //         $("#image").val(res.data.src);
        //         $("#imageId").val(res.data.id);
        //         $("[name=mediaImage]").val("");
        //    }
        // });

        upload.render({
           elem: '#layuiadmin-upload-audio'
           , url: '/admin/upload/wechatFile?type=audio'
           , accept: 'audio'
           , method: 'post'
           , acceptMime: 'audio/mp3,audio/amr,/audio/wma,audio/wav'
           ,before: function(obj){
               //预读本地文件示例，不支持ie8
           }
           , done: function (res) {
                if(!res.data)  return layer.msg('上传失败');

                $("#audio").val(res.data.src);
                $("#audioId").val(res.data.id);
                $("[name=mediaAudio]").val("");
           }
        });


        form.verify({
            required:function(value,item){
                if($(item).is(':hidden')){
                    return;
                }
                if(!value ||value=="" || value.length==0){
                    return "必填项不能为空";
                }
            }
        })
    });
</script>